import React, { Component } from 'react'
import ComC from './ComC'

export default class ComB extends Component {
  constructor(props) {
    super()
    console.log(111, props);
    this.state = {
      timer: null,
      info1: '我是B组件',
      // 在constructor中给state赋值，如果这个值来自props，就需要传递props这个参数
      // name: props.name
    }
  }
  changeNum() {
    console.log(this.props.num);
    this.props.num = 666
    
  }
  shouldComponentUpdate(newProps, newState) {
    console.log(newProps);
    console.log(this.props);
    console.log(newState);
    console.log(this.state);
    // 当数据变化时，询问组件是否需要更新，要返回true/false
    // 如果返回true，就会更新页面，调用render
    // 如果返回false，就不会更新页面，不调用render
    console.log('5-生命周期shouldComponentUpdate');
    return true
  }
  getSnapshotBeforeUpdate(oldProps, oldState) {
    // Snapshot 快照，当前的数据状态
    console.log(oldProps, oldState);
    console.log('6-生命周期getSnapshotBeforeUpdate');
    return {name: 'Tom'}
  }
  componentDidUpdate(oldProps, oldState, snapshot) {
    // vue中的Updated
    console.log('7-生命周期componentDidUpdate');
    console.log(oldProps);
    console.log(this.props);
    console.log(snapshot);
  }
  componentWillUnmount() {
    // clearInterval(this.state.timer)
    // 组件将要被卸载
    // 如果组件中有手动添加的定时器、监听等，需要在这里移除
    console.log('8-生命周期componentWillUnmount');
  }
  render() {
    console.log('render:', this.props);
    let {info1, info2, num} = this.props
    return (
      <div>
        <p>我是子组件</p>
        {/* <ComC info1={this.state.info1} info2={info2}></ComC> */}
        {/* 将所有的props都传给子组件:{...this.props} */}
        <ComC {...this.props}></ComC>
        <p>-----{info1}------</p>
        <p>{info2}</p>
        <p onClick={()=>this.changeNum()}>{num}</p>
        {/* <p>{obj1.age++}</p> */}
        <button onClick={()=>this.props.fn('子传父')}>执行</button>
      </div>
    )
  }
}
